const {createApp} = Vue;
	const app = createApp({
		data() {
			return{
				goods,
				// 配送费
				delevaryPrice:5,
				// 起送门槛
				deliveryThreshold:30,
				addIconInfo:{
					show:false,
					point:{
						x:0,y:0
					}
				}
			}
		},
		methods:{
			increse(val,el){
				this.toJump(el)
				
				val.chooseNum++;
				val.allPrice = val.chooseNum * val.price
			},
			decrese(val){
				if(val.chooseNum <= 0){
					return
				}
				val.chooseNum--;
				val.allPrice = val.chooseNum * val.price
			},
			addIconTransitionend(){
				this.addIconInfo.show = false;
				this.$refs.footerCar.classList.add('animate')
			},
			carAnimationend(){
				this.$refs.footerCar.classList.remove('animate')
			},
			toJump(el){
				this.addIconInfo.show = false
				setTimeout(()=>{
					this.addIconInfo.show = true
					// 设置起始位置
					const startRect = el.target.getBoundingClientRect();
					this.addIconInfo.point.x = startRect.x + startRect.width/2
					this.addIconInfo.point.y = startRect.y + startRect.height/2
				},0)
				setTimeout(()=>{
					const endRect = this.$refs.footerCar.getBoundingClientRect();
					this.addIconInfo.point.x = endRect.x + endRect.width/2
					this.addIconInfo.point.y = endRect.y + endRect.height/2
				},1)
			}
		},
		mounted(){
			this.goods = this.goods.map(val => {
				return {
					...val,
					chooseNum:0,
					allPrice:0
				}
			})
		},
		computed:{
			payInfo(){
				let sumPrice = 0;
				let goodsNum = 0;
				this.goods.forEach(val => {
					sumPrice += val.allPrice;
					goodsNum += val.chooseNum;
				})
				return {
					payPrice:sumPrice,
					goodsNum,
					thresholdPrice:this.deliveryThreshold - sumPrice
				};
			},
			addIconStyle(){
				return{
					divStyle:{
						transform:`translateX(${this.addIconInfo.point.x}px)`
					},
					iconStyle:{
						transform:`translateY(${this.addIconInfo.point.y}px)`
					}
				}
			}
		}
	})
	const vm = app.mount('#app')